<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单信息 - bilibili</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/product-common.js"></script>
    <script src="js/address.js"></script>
    <link href="css/product-common.css" rel="stylesheet">
    <link href="css/ordermessage.css" rel="stylesheet">
    <link href="css/address.css" rel="stylesheet">
    <link href="css/login.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.js"></script>

</head>
<body>
    <div id="app">
        <product @logined="logined"></product>

        <div class="container">
            <div class="order-card">
                <h2 class="order-title">订单信息</h2>

                <table class="order-table">
                    <thead>
                    <tr>
                        <th>商品</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>合计</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td style="display:flex ;">
                            <div>
                                <img :src="product.image" style="width: 150px; height: 230px;">
                            </div>
                            <div>
                                <div class="event-name">{{product.name}}</div>
<!--                                <div class="event-detail">bilibili</div>-->
<!--                                <div class="event-detail">哔哩哔哩</div>-->
                            </div>
                        </td>
                        <td class="price">{{"¥" + product.price}}</td>
                        <td class="price">{{num}}</td>
                        <td class="price">{{"¥" + product.price * num}}</td>
                    </tr>
                    </tbody>
                </table>

                <div class="coupon-section">
                    <div class="coupon-title">暂无可用优惠券</div>
                </div>
                <my-address ref="myAddress" v-if="Object.keys(myinfo).length != 0" :uid="myinfo.id" :selectedaddress.sync="selectedAddress"></my-address>



                <div class="buyer-section" v-if ="Object.keys(selectedAddress).length != 0 && Object.keys(defultAddress).length == 0">
                    <div class="buyer-title">收货地址</div>

                    <ul class="infinite-list" style="list-style-type: none">
                        <li class="infinite-list-item">收货人:&nbsp;{{selectedAddress.name}}</li>
                        <li class="infinite-list-item">联系电话:&nbsp;{{selectedAddress.phone}}</li>
                        <li class="infinite-list-item">收货地址:&nbsp;{{selectedAddress.region}} {{selectedAddress.detail}}</li>
                    </ul>

<!--                    <button class="add-btn" @click="getaddress">选择收货地址</button>-->
                </div>

                <div class="buyer-section" v-else>
                    <div class="buyer-title">收货地址</div>

                    <ul class="infinite-list" style="list-style-type: none">
                        <li class="infinite-list-item">收货人:&nbsp;{{defultAddress.name}}</li>
                        <li class="infinite-list-item">联系电话:&nbsp;{{defultAddress.phone}}</li>
                        <li class="infinite-list-item">收货地址:&nbsp;{{defultAddress.region}} {{defultAddress.detail}}</li>
                    </ul>
                    <!--                    <button class="add-btn" @click="getaddress">选择收货地址</button>-->
                </div>

                <div class="order-summary">
                    <div class="summary-row">
                        <div class="summary-label">商品总额</div>
                        <div class="summary-value">¥{{product.price * num}}</div>
                    </div>
                    <div class="summary-row">
                        <div class="summary-label">应付金额</div>
                        <div class="summary-value">¥{{product.price * num}}</div>
                    </div>

                    <button class="pay-btn" @click="saveOrder">支付, ¥{{product.price * num}}</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            product:{},
            num: 1,
            isShowForm: false,
            myinfo: {},
            address:{},
            form:{
                name: "",
                addressdetaild:"",
                address:"",
                phone:"",
                isDefault: false
            },
            isShowAddress: false,
            orderAddress: {},
            isShowOrderAddress: false,
            selectedAddress: {},
            defultAddress:{},


        },
        created() {
            this.orderGetProduct();
        },
        methods : {
            logined(myinfo){
                this.myinfo = myinfo
                this.getDefultAddress();
            },
            orderGetProduct(){
                axios.get("b-shopping/product/orderGetProduct"+location.search).then(res => this.product = res.data);
            },
            // saveAddress(){
            //     const address = {
            //         uid: this.myinfo.id,
            //         name: this.form.name,
            //         addr: this.form.address + this.form.addressdetaild,
            //         phone: this.form.phone,
            //         isDefault: this.form.isDefault
            //     }
            //     console.log("address", address)
            //     axios.post("b-user/address/saveAddress", address).then(res=>{
            //         this.$message(res.data.msg);
            //         this.isShowForm = false;
            //     })
            // },
            selectAddress(address){
                this.orderAddress = address;
                this.isShowAddress = false;
                this.isShowOrderAddress = true;
            },
            saveOrder(){
                if (this.selectedAddress.id == null) {
                    this.$message("请选择地址");
                    return;
                }
                const order = {
                    oid: this.selectedAddress.id,
                    total: this.num * this.product.price,
                    nums: this.num,
                    pid: this.product.id,
                    uid: this.myinfo.id
                }
                axios.post("b-shopping/pay/saveOrder", order).then(res=>{
                    if(res.data.code == 1){
                        const newWindow = window.open('支付', '_blank');
                        newWindow.document.write(res.data.data);
                        newWindow.document.close();
                    }
                })
            },
            getDefultAddress(){
                axios.get("b-user/address/getDefultAddress", {
                    params:{
                        uid: this.myinfo.id,
                    }
                }).then(res=>{
                    this.defultAddress = res.data.data;
                    if (this.defultAddress) {
                        this.selectedAddress = this.defultAddress;
                    }
                })
            }
        },
        watch: {
            selectedAddress(newVal) {
                if( this.selectedAddress != null){
                    this.defultAddress = {};
                }
            },
        }
    })
</script>
</html>